import React from 'react'
import ReactDOM from 'react-dom'

//使用function构造函数，定义普通的无状态组件
function CmtItem(props){
    return <div>
    <h1>评论人好：{props.user}</h1>
    <div>评论内容：{props.content}</div>
</div>
}

class CmtList extends React.Component{
    constructor(){
        super()
        this.state = {
            CommentList:[ //评论列表数据
                {id:1,user:'张三',content:'哈哈 沙发'},
                {id:2,user:'李四',content:'国服第一，不服来战'},
                {id:3,user:'王五',content:'你真是个棒槌，带死你'},
                {id:4,user:'赵六',content:'楼下是个山炮，不嫌丢人吗？？？😆'},
            ]
        }
    }
    render(){
        return <div>
            <h1>这是评论列表组件</h1>
            {this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }
}




ReactDOM.render(
    <div>
        <CmtList></CmtList>   
    </div>,document.getElementById('app'))